<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE composition PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition template="/resources/template/template.xhtml"
                xmlns:ui="http://java.sun.com/jsf/facelets"                    
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:p="http://primefaces.org/ui"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:hr="http://java.sun.com/jsf/composite/autocomplete">


    <ui:define name="content">

        <h:panelGroup >
            <h:form  >

                <h:panelGrid columns="2" >
                    <p:panel header="Detail" >
                        <h:outputLabel value="Component "/>
                        <p:selectOneMenu value="#{staffLoanController.current.paysheetComponent}">
                            <f:selectItem itemLabel="Select Component"/>
                            <f:selectItems value="#{staffLoanController.compnent}"
                                           var="i"  itemLabel="#{i.name}" itemValue="#{i}"/>
                        </p:selectOneMenu>
                        <h:outputLabel value="From"/>
                        <p:calendar  value="#{staffLoanController.current.fromDate}" 
                                     navigator="true"
                                     pattern="dd MM yyyy">                            
                        </p:calendar>
                        <h:outputLabel value="To"/>
                        <p:calendar   value="#{staffLoanController.current.toDate}"
                                      navigator="true"
                                      pattern="dd MM yyyy">                            
                        </p:calendar>
                        <h:outputLabel value="Staff "/>
                        <hr:completeStaff value="#{staffLoanController.current.staff}"/>
                        <h:outputLabel value="Loan No"/>
                        <p:inputText autocomplete="off"  value="#{staffLoanController.current.loanNo}"/>
                        <h:outputLabel value="Account No"/>
                        <p:inputText autocomplete="off"  value="#{staffLoanController.current.accountNo}"/>
                        <p:outputLabel value="Bank Branch"/>                                           
                        <hr:completeBank_Branch value="#{staffLoanController.current.bankBranch}"/>                                           
                        <h:outputLabel value="Full Amount"/>
                        <p:inputText autocomplete="off"  value="#{staffLoanController.current.loanFullAmount}"/>  
                        <h:outputLabel/>
                        <p:selectBooleanCheckbox value="#{staffLoanController.current.sheduleForPaid}" 
                                                 itemLabel="Shedule For Paid"/>
                        <h:outputLabel value="Monthly Installment"/>                        
                        <p:inputText autocomplete="off"  value="#{staffLoanController.current.staffPaySheetComponentValue}"/>                    
                        <h:outputLabel value="Comments"/>
                        <p:inputText autocomplete="off"  value="#{staffLoanController.current.comment}"/>
                        <h:outputLabel/>
                        <p:selectBooleanCheckbox value="#{staffLoanController.current.completed}" 
                                                 itemLabel="Completed"/>
                        <p:commandButton value="Save" action="#{staffLoanController.save}" ajax="false" onclick="onSubmitButton();"/>
                        
                        </h:panelGrid>
                    </p:panel>

                    <p:panel id="staff" header="Staff List">
                        <p:commandButton ajax="false" 
                                         value="Fill Staff"
                                        action="#{staffController.createStaffWithCode()}"
                                         onclick="onSubmitButton();"/>
                        <p:dataTable  value="#{staffController.staffWithCode}" 
                                      var="s" scrollable="true"
                                      filteredValue="#{staffController.filteredStaff}"     
                                      scrollHeight="300"                                   
                                      rowKey="#{s.id}" 
                                      selection="#{staffController.selectedList}"
                                      rowIndexVar="i">

                            <p:column  selectionMode="multiple" >                            
                            </p:column>

                            <p:column >
                                #{i+1}
                            </p:column>     
                            <p:column headerText="Code" filterBy="#{s.code}"  filterMatchMode="contains">
                                <h:outputLabel value="#{s.code}"/>
                            </p:column>
                            <p:column headerText="Name" filterBy="#{s.person.nameWithTitle}"  filterMatchMode="contains">
                                <h:outputLabel value="#{s.person.nameWithTitle}"/>
                            </p:column>
                        </p:dataTable> 
                    </p:panel>
                </h:panelGrid>


                <p:spacer height="30" />

                <p:panel id="lst">
                    <f:facet name="header">      
                        <h:outputLabel value="#{staffPaySheetComponentAllController.paysheetComponent.name}" style="text-transform:capitalize;" />
                        <p:commandButton ajax="false" value="Remove Selected" action="#{staffPaySheetComponentAllController.removeAll}" style="float: right;" onclick="onSubmitButton();"/>
                        <p:commandButton ajax="false" value="Fill" action="#{staffPaySheetComponentAllController.createStaffPaysheetComponent}" />
                    </f:facet>
                    <h:panelGrid columns="2" >
                        <h:outputLabel value="From : " />
                        <p:calendar value="#{staffPaySheetComponentAllController.fromDate}" 
                                    navigator="true"
                                    pattern="dd MMMM yyyy hh:mm:ss a" />                       
                        <h:outputLabel value="Paysheet Component"/>
                        <p:selectOneMenu value="#{staffPaySheetComponentAllController.paysheetComponent}">                        
                            <f:selectItem itemLabel="Select Paysheet Component"/>
                            <f:selectItems value="#{staffPaySheetComponentAllController.compnent}"
                                           var="i"  itemLabel="#{i.name}" itemValue="#{i}" />
                        </p:selectOneMenu>
                        <h:outputLabel value="Employee : "/>
                        <hr:completeStaff value="#{staffPaySheetComponentAllController.reportKeyWord.staff}"/>
                        <h:outputLabel value="Department : "/>
                        <hr:department value="#{staffPaySheetComponentAllController.reportKeyWord.department}"/>
                        <h:outputLabel value="Institution : "/>
                        <hr:department value="#{staffPaySheetComponentAllController.reportKeyWord.institution}"/>
                        <h:outputLabel value="Staff Category : "/>
                        <hr:completeStaffCategory value="#{staffPaySheetComponentAllController.reportKeyWord.staffCategory}"/>
                        <h:outputLabel value="Designation : "/>
                        <hr:completeDesignation value="#{staffPaySheetComponentAllController.reportKeyWord.designation}"/>
                        <h:outputLabel value="Roster : "/>
                        <hr:completeRoster value="#{staffPaySheetComponentAllController.reportKeyWord.roster}"/>                      
                    </h:panelGrid>

                    <p:dataTable  value="#{staffPaySheetComponentAllController.items}" 
                                  filteredValue="#{staffPaySheetComponentAllController.filteredStaffPaysheet}"
                                  var="i" scrollHeight="350"  editable="true"
                                  rowStyleClass="#{i.exist eq true ? 'exist':null}"
                                  scrollable="true"  selection="#{staffPaySheetComponentAllController.selectedStaffComponent}" 
                                  rowKey="#{i.id}"  >

                        <p:ajax event="rowEdit" listener="#{staffPaySheetComponentAllController.onEdit}" />  

                        <p:column  selectionMode="multiple" >                            
                        </p:column>

                        <p:column headerText="From" filterBy="#{i.fromDate}" filterMatchMode="contains" >
                            <h:outputLabel value="#{i.fromDate}" >
                                <f:convertDateTime pattern="dd MMMM yyyy"/>
                            </h:outputLabel>
                        </p:column>
                        <p:column headerText="To" filterBy="#{i.toDate}"  filterMatchMode="contains">
                            <p:cellEditor>  
                                <f:facet name="output">
                                    <h:outputLabel value="#{i.toDate}">
                                        <f:convertDateTime pattern="dd MMMM yyyy"/>
                                    </h:outputLabel>
                                </f:facet>
                                <f:facet name="input">
                                    <p:calendar value="#{i.toDate}"  
                                                navigator="true"
                                                pattern="dd MMMM yyyy" />
                                </f:facet>
                            </p:cellEditor>

                        </p:column>

                        <p:column headerText="Grade" filterBy="#{i.staff.grade}" filterMatchMode="contains">
                            <h:outputLabel value="#{i.staff.grade}"/>                           
                        </p:column>

                        <p:column headerText="Category" filterBy="#{i.staff.staffCategory.name}" filterMatchMode="contains">
                            <h:outputLabel value="#{i.staff.staffCategory.name}"/>
                        </p:column>

                        <p:column headerText="Designtion" filterBy="#{i.staff.designation.name}" filterMatchMode="contains">
                            <h:outputLabel value="#{i.staff.designation.name}"/>
                        </p:column>

                        <p:column headerText="Staff" filterBy="#{i.staff.person.nameWithTitle}" filterMatchMode="contains">
                            <h:outputLabel value="#{i.staff.person.nameWithTitle}"/>
                        </p:column>
                        <p:column headerText="Staff Code" filterBy="#{i.staff.code}" filterMatchMode="contains">
                            <h:outputLabel value="#{i.staff.code}"/>
                        </p:column>
                        <p:column headerText="Institution" filterBy="#{i.staff.workingDepartment.institution.name}" filterMatchMode="contains">
                            <h:outputLabel value="#{i.staff.workingDepartment.institution.name}"/>
                        </p:column>
                        <p:column headerText="Department" filterBy="#{i.staff.workingDepartment.name}" filterMatchMode="contains">
                            <h:outputLabel value="#{i.staff.workingDepartment.name}"/>
                        </p:column>
                        <p:column headerText="Roster" filterBy="#{i.staff.roster}" filterMatchMode="contains">
                            <h:outputLabel value="#{i.staff.roster}"/>
                        </p:column>
                        <p:column headerText="Value"  filterBy="#{i.staffPaySheetComponentValue}" filterMatchMode="contains">
                            <p:cellEditor>  
                                <f:facet name="output">
                                    <h:outputLabel value="#{i.staffPaySheetComponentValue}">
                                        <f:convertNumber pattern="#,##0.00" />
                                    </h:outputLabel>
                                </f:facet>
                                <f:facet name="input">
                                    <p:inputText autocomplete="off" value="#{i.staffPaySheetComponentValue}"/>
                                </f:facet>
                            </p:cellEditor>

                        </p:column>

                        <p:column style="width:6%">  
                            <p:rowEditor />  
                        </p:column>  

                        <p:column style="width:6%">  
                            <p:commandButton ajax="false" value="Remove" action="#{staffPaySheetComponentAllController.remove}" onclick="onSubmitButton();">
                                <f:setPropertyActionListener target="#{staffPaySheetComponentAllController.current}" value="#{i}" />
                            </p:commandButton>
                        </p:column>  


                    </p:dataTable>
                </p:panel>
            </h:form>

        </h:panelGroup>

    </ui:define>

</ui:composition>
